<template>
	<view v-if="show" class="maskWarp">
		<view class="load">
			<view class="circle"></view>
			<view class="loadView">{{content}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: String,
				default: '加载中'
			},
			show: {
				type: Boolean,
				default: false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.maskWarp {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		transition: all 0.1s ease-in-out;
		display: flex;
		justify-content: center;
		align-items: center;

		.load {
			position: relative;
			width: 260rpx;
			height: 260rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.circle {
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				border-radius: 200rpx;
				border: 2px solid;
				border-color: #e4e4e4 #e4e4e4 #e4e4e4 #c7c7c7;
				animation: turn 1s linear infinite;
			}

			@keyframes turn {
				0% {
					-webkit-transform: rotate(0deg);
				}

				25% {
					-webkit-transform: rotate(90deg);
				}

				50% {
					-webkit-transform: rotate(180deg);
				}

				75% {
					-webkit-transform: rotate(270deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			.loadView {
				position: absolute;
				color: $uni-text-color-grey;
				left: 50%;
				top: 50;
				transform: translateX(-50%);
				white-space: nowrap;
			}
		}
	}
</style>
